import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as Reflux from 'reflux';
const $ = require("jquery");
var ajax = require("./select-reflux.js");

var RADIO = React.createClass({
    //mixins: [Reflux.connect(SelectStore,'dataResult')],
    propTypes: {
        name: React.PropTypes.string.isRequired,
    },
    getDefaultProps: function() {
        return {
            value: null,
            keyName: "",
            isAuto: true,
            isRefresh: false, //是否强制刷新
            showName: "name",
            url: "/api/caigou/dict/list",
            searchParam: "",
            isClick: false
        };
    },
    //state isRefresh 是否已经强制刷新
    getInitialState: function() {
        return {
            value: '',
            listShow: false,
            dataResult: false,
            item: "",
            isLoad: false,
            stateNum: 0
        }
    },
    componentWillMount: function() {
        var temp = ajax.init();
        this.SelectActions = temp.SelectActions;
        this.SelectStore = temp.SelectStore;
        this.unsubscribe = this.SelectStore.listen(this.onStatusChange);
        this.SelectActions.get(this.props.url, this.props.searchParam);
    },
    onStatusChange: function(result) {
        //console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&" + JSON.stringify(result))
        var items = this.props.keyName == "" ? result.result : (result.result[this.props.keyName]),
            item = {},
            $selectItem = [],
            state = {},
            $defaultValue = this.props.defaultValue;
        for (var i = 0; i < items.length; i++) {
            item = items[i];
            items[i].checked = false;
            for (var j = 0; j < $defaultValue.length; j++) {
                if (item[this.props.valuekey] == $defaultValue[j]) {
                    items[i].checked = true;
                    $selectItem.push(item);
                }
            }
            /* if (item[this.props.valuekey] != undefined && item[this.props.valuekey] == this.props.defaultValue) {
                    items[i].checked = true;
                    $selectItem.push(item);
                }*/
        }
        if ($selectItem.length < 1) {
            $selectItem = "";
        }
        ////console.log(this.props.defaultValue + " select say :" + JSON.stringify(selectItem));

        if (this.props.defaultValue != "") {
            this.setState({
                value: item.name,
                listShow: false,
                isClick: false,
                "item": ($selectItem.length < 1 ? "" : $selectItem[0])
            });
            this.props.setFormValue({
                "name": this.props.name,
                "value": ($selectItem.length < 1 ? "" : $selectItem[0])
            });
            this.props.handleBlur(($selectItem.length < 1 ? "" : $selectItem[0]), this);
        }
        this.setState({
            "dataResult": result,
            "isLoad": true,
            isClick: (this.props.isClick == undefined ? false : this.props.isClick)
        });
        this.props.isAuto || this.handleClick();


    },
    componentDidMount: function() {
        //console.info("selesect    sya stateNum "+this.state.stateNum)
    },
    componentWillUnmount: function() {
        this.unsubscribe();
    },
    componentWillUpdate: function(nextProps, nextState) {
        if (nextProps.reFreshNum && nextState.stateNum < nextProps.reFreshNum) {
            //console.info("radio  say  强制刷新 "+this.state.stateNum)
            this.setState({
                "stateNum": Number(this.state.stateNum) + 1,
                "isClick": false,
                "isLoad": false,
                "value": "",
                item: ""
            });
            this.SelectActions.get(nextProps.url, nextProps.searchParam);
            this.props.handleBlur("", this);
        }
    },
    handleChange: function(event) {
        //console.log("fuck")
    },
    handleClick: function(e) {

        //console.log("hahaha" + JSON.stringify(this.props.children))
        if (!this.props.isAuto && !this.state.isLoad) {
            this.SelectActions.get(this.props.url, this.props.searchParam);
        } else {
            this.setState({
                listShow: !this.state.listShow,
                isClick: true
            })
        }

    },
    getValue: function(item, e) {

        var $parent = $(ReactDOM.findDOMNode(this)),
            $value = [];

        //console.info("checkbox say  select item")

        //$("input[name='"+this.props.name+"']:checked",$parent).each(function () {
        // //console.info("checkbox 选中之"+this.value);
        //$value.push(JSON.parse(this.value));
        //});
        $value = item;
        this.setState({
            value: item.name,
            listShow: false,
            isClick: false,
            "item": $value
        });
        this.props.setFormValue({
            "name": this.props.name,
            "value": $value
        });
        this.props.handleBlur($value, this);
        /*//console.log("点击值:" + JSON.stringify(item));

            this.setState({value: item.name, listShow: false, isClick: false, "item": item});
            if (this.props.valuekey) {
                this.props.setFormValue({"name": this.props.name, "value": item[this.props.valuekey]});
            } else {
                this.props.setFormValue({"name": this.props.name, "value": item});
            }*/
        //this.setState({listShow:false,isClick:false})
    },
    handleBlur: function() {
        if (this.state.isClick) {
            this.setState({
                listShow: false,
                isClick: false
            })
            this.props.handleBlur(this.state.item, this);
        }
        //console.log("鼠标移出 select"+this.state.value);
    },
    render: function() {
        var value = this.state.value,
            $Li = [],
            item, selectItem;
        var result = this.state.dataResult.result;
        //this.props.keyName==""
        //this.props.keyName==""?result.result:(result.result[this.props.keyName])
        var items = this.state.dataResult.result ? (this.props.keyName == "" ? result : (result[this.props.keyName])) : false;
        if (!items) {
            return (
                <div className="temp">loading.....</div>
            )
        }


        var random = Math.floor(Math.random() * 1000);
        return (
            <div className="virtual-radio" >
                    {
                        items.map(function (item, i) {
                            return (
                                <div className="temp" key={i}>
                                    <input  onClick={this.getValue.bind(this,item)} defaultChecked={item.checked}   id={random+i} type="radio" value={JSON.stringify(item)} name={this.props.name} className="radio"/><label className="radio-label" htmlFor={random+i} >{item.name}</label>
                                </div>
                            );
                        }, this)
                    }
                </div>
        )
    }
});

var CHECKBOX = React.createClass({
    //mixins: [Reflux.connect(SelectStore,'dataResult')],
    propTypes: {
        name: React.PropTypes.string.isRequired,
    },
    getDefaultProps: function() {
        return {
            value: null,
            keyName: "",
            isAuto: true,
            isRefresh: false, //是否强制刷新
            showName: "name",
            url: "/api/caigou/dict/list",
            searchParam: "",
            isClick: false
        };
    },
    //state isRefresh 是否已经强制刷新
    getInitialState: function() {
        return {
            value: '',
            listShow: false,
            dataResult: false,
            item: "",
            isLoad: false,
            stateNum: 0
        }
    },
    componentWillMount: function() {
        var temp = ajax.init();
        this.SelectActions = temp.SelectActions;
        this.SelectStore = temp.SelectStore;
        this.unsubscribe = this.SelectStore.listen(this.onStatusChange);
        this.SelectActions.get(this.props.url, this.props.searchParam);
    },
    onStatusChange: function(result) {
        console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&" + JSON.stringify(result))
        var items = this.props.keyName == "" ? result.result : (result.result[this.props.keyName]),
            item = {},
            $selectItem = [],
            state = {},
            $defaultValue = this.props.defaultValue;
        for (var i = 0; i < items.length; i++) {
            item = items[i];
            items[i].checked = false;
            for (var j = 0; j < $defaultValue.length; j++) {
                if (item[this.props.valuekey] == $defaultValue[j]) {
                    items[i].checked = true;
                    $selectItem.push(item);
                }
            }
            /* if (item[this.props.valuekey] != undefined && item[this.props.valuekey] == this.props.defaultValue) {
                    items[i].checked = true;
                    $selectItem.push(item);
                }*/
        }
        if ($selectItem.length < 1) {
            $selectItem = "";
        }
        ////console.log(this.props.defaultValue + " select say :" + JSON.stringify(selectItem));

        if (this.props.defaultValue != "") {
            this.setState({
                value: item.name,
                listShow: false,
                isClick: false,
                "item": ($selectItem.length < 1 ? "" : $selectItem)
            });
            this.props.setFormValue({
                "name": this.props.name,
                "value": ($selectItem.length < 1 ? "" : $selectItem)
            });
            this.props.handleBlur(($selectItem.length < 1 ? "" : $selectItem), this);
        }
        this.setState({
            "dataResult": result,
            "isLoad": true,
            isClick: (this.props.isClick == undefined ? false : this.props.isClick)
        });
        this.props.isAuto || this.handleClick();


    },
    componentDidMount: function() {
        //console.info("selesect    sya stateNum "+this.state.stateNum)
    },
    componentWillUnmount: function() {
        this.unsubscribe();
    },
    componentWillUpdate: function(nextProps, nextState) {
        if (nextProps.reFreshNum && nextState.stateNum < nextProps.reFreshNum) {
            this.setState({
                "stateNum": Number(this.state.stateNum) + 1,
                "isClick": false,
                "isLoad": false,
                "value": "",
                item: ""
            });
            this.SelectActions.get(nextProps.url, nextProps.searchParam);
            this.props.handleBlur("", this);
        }
    },
    handleChange: function(event) {
        //console.log("fuck")
    },
    handleClick: function(e) {

        //console.log("hahaha" + JSON.stringify(this.props.children))
        if (!this.props.isAuto && !this.state.isLoad) {
            this.SelectActions.get(this.props.url, this.props.searchParam);
        } else {
            this.setState({
                listShow: !this.state.listShow,
                isClick: true
            })
        }

    },
    getValue: function(item, e) {

        var $parent = $(ReactDOM.findDOMNode(this)),
            $value = [];

        //console.info("checkbox say  select item")

        $("input[name='" + this.props.name + "']:checked", $parent).each(function() {
            // //console.info("checkbox 选中之"+this.value);
            $value.push(JSON.parse(this.value));
        });
        this.setState({
            value: item.name,
            listShow: false,
            isClick: false,
            "item": ($value.length < 1 ? "" : $value)
        });
        this.props.setFormValue({
            "name": this.props.name,
            "value": ($value.length < 1 ? "" : $value)
        });
        this.props.handleBlur(($value.length < 1 ? "" : $value), this);
        /*//console.log("点击值:" + JSON.stringify(item));

            this.setState({value: item.name, listShow: false, isClick: false, "item": item});
            if (this.props.valuekey) {
                this.props.setFormValue({"name": this.props.name, "value": item[this.props.valuekey]});
            } else {
                this.props.setFormValue({"name": this.props.name, "value": item});
            }*/
        //this.setState({listShow:false,isClick:false})
    },
    handleBlur: function() {
        if (this.state.isClick) {
            this.setState({
                listShow: false,
                isClick: false
            })
            this.props.handleBlur(this.state.item, this);
        }
        //console.log("鼠标移出 select"+this.state.value);
    },
    render: function() {
        var value = this.state.value,
            $Li = [],
            item, selectItem;
        var result = this.state.dataResult.result;
        //this.props.keyName==""
        //this.props.keyName==""?result.result:(result.result[this.props.keyName])
        var items = this.state.dataResult.result ? (this.props.keyName == "" ? result : (result[this.props.keyName])) : false;
        if (!items) {
            return (
                <div className="temp">loading.....</div>
            )
        }


        var random = Math.floor(Math.random() * 1000);
        return (
            <div className="virtual-radio" >
                    {
                        items.map(function (item, i) {
                            return (
                                <div className="temp" key={i}>
                                    <input  onClick={this.getValue.bind(this,item)} defaultChecked={item.checked}   id={random+i} type="checkbox" value={JSON.stringify(item)} name={this.props.name} className="radio"/><label className="radio-label" htmlFor={random+i} >{item.name}</label>
                                </div>
                            );
                        }, this)
                    }
                </div>
        )
    }
});
module.exports = {
    RADIO: RADIO,
    CHECKBOX: CHECKBOX
}


/* <div className="virtual-radio">
                    <input id="a" type="radio" name="same1" className="radio"/><label className="radio-label" for="a">0001</label>
                    <input id="b" type="radio" name="same1" className="radio"/><label className="radio-label" for="b">0002</label>
                    <input id="c" type="radio" name="same1" className="radio"/><label className="radio-label" for="c">0003</label>
                    <input id="d" type="radio" name="same1" className="radio"/><label className="radio-label" for="d">0004</label>
                </div>
                */